<template>
  <div class="app-container">
    <Listaction ref="actionref" title="查看留言" :type="2"></Listaction>
      <div class="filter-container">
        <div class="warning"><p>你登陆的账号：<a href="javascript:;">{{ name }}</a>，绑定查询数据的区域为：<a
          href="javascript:;">{{ bind_city }}</a></p>
          <p>本页面只展现<a href="javascript:;"> 发布区域 </a>或<a href="javascript:;"> 转交分发 </a>为<a href="javascript:;">
            {{ bind_city }}</a> 或快速定位至 <a href="javascript:;">{{ bind_city }}</a> 的留言数据</p></div>
        <div style="margin-top:10px;">

          <el-date-picker
            v-model="listQuery.checktime"
            type="daterange"
            range-separator="至"
            class="filter-item"
            style="width:300px"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <el-select v-model="listQuery.status" class="filter-item w-200" placeholder="请选择状态" clearable>
            <el-option
              v-for="item in baseData.statusAry"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="listQuery.chaoqi" class="filter-item w-200" placeholder="需处理的超期筛选" clearable>
            <el-option
              v-for="(item,idx) in ['所有','未超期','已超期']"
              :label="item"
              :value="idx"
            >
            </el-option>
          </el-select>
          <el-select v-model="listQuery.quhua_id" class="filter-item w-200" placeholder="请选择搜索模式">
            <el-option
              v-for="(item,idx) in ['混合区域搜索','精确至'+bind_city]"
              :label="item"
              :value="idx"
            >
            </el-option>
          </el-select>
          <el-button-group class="filter-item">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="search"
            >
              搜索
            </el-button>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-refresh"
              @click="refresh"
            >
              重置
            </el-button>

          </el-button-group>
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        height="100%"
        class="table-container"
        highlight-current-row
        @sort-change="sortChange"
      >

        <el-table-column
          width="80"
          label="wid"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.wid }}
          </template>
        </el-table-column>


        <el-table-column
          width="80"
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==7" type="warning">已受理</el-tag>
            <el-tag v-else-if="scope.row.status==2" type="info">待处理</el-tag>
            <el-tag v-else-if="scope.row.status==3 || scope.row.status==4 || scope.row.status==5" type="success">已办理
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="180"
          label="发帖人"
          align="center"
        >
          <template slot-scope="scope">
            <div style="font-size:12px">{{ scope.row.u_name }}</div>
          </template>
        </el-table-column>
        <el-table-column
          width="350"
          label="标题"
          align="left"
        >
          <template slot-scope="scope">
            <div style="color:#409EFF;font-size:14px;cursor: pointer" @click="doAction(scope.row.wid)">
              {{ scope.row.title }}
            </div>
            <div style="display: flex;align-items: center">
              <div v-for="(item,idx) in scope.row.lingyu" class="titletag">
                {{ item }}
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          width="135"
          label="选择的领导"
          align="center"
        >
          <template slot-scope="scope">
            <div style="font-size:12px">{{ scope.row.lid }}</div>
          </template>
        </el-table-column>

        <el-table-column
          width="135"
          label="发帖时间"
          align="center"
          prop="create_time"
          :sortable="'custom'"
        >
          <template slot-scope="scope">
            <div style="font-size:12px">{{ scope.row.create_time }}</div>
          </template>
        </el-table-column>
        <el-table-column
          width="135"
          label="截止时间"
          prop="endTime"
          :sortable="'custom'"
          align="center"
        >
          <template slot-scope="scope">
            <div style="font-size:12px">{{ scope.row.endTime }}</div>
            <div style="font-size:12px;color:red"
                 v-if="scope.row.d_reply_time>0 && scope.row.d_endTime<scope.row.d_reply_time">
              超期{{ chaoqiTime(scope.row.d_reply_time, scope.row.d_endTime) }}
            </div>
            <div style="font-size:12px;color:red" v-if="scope.row.status==2 && scope.row.d_endTime<scope.row.nowTime">
              超期{{ chaoqiTime(scope.row.nowTime, scope.row.d_endTime) }}
            </div>
          </template>
        </el-table-column>


        <el-table-column
          width="135"
          label="回复时间"
          align="center"
        >
          <template slot-scope="scope">
            <div style="font-size:12px">{{ scope.row.reply_time }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="更多信息"
          width="135"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-more"
              size="mini"
              @click="goWid(scope.row.wid)"
            />
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="fetchData"
      />
  </div>
</template>
<style lang="less">
.el-descriptions-item__content {
  font-size: 14px;
}

.el-drawer__body {
  &::-webkit-scrollbar {
    width: 5px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #999;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}
</style>
<style scoped lang="less">

.titletag {
  color: #fff;
  padding: 0 5px;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  border-radius: 3px;
  background: #409EFF;
  margin: 5px 5px 0 0;
}

.cover {
  font-size: 12px;
  color: #739099;
}

.reply-item {
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
  padding: 15px;
  margin: 10px 0;
  border-radius: 5px;

  &.delete_item {
    color: #999;
    border-color: #ddd;
    background-color: #eee;

    .headerLine {
      border-bottom: 1px solid #ddd !important;
    }
  }

  .headerLine {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #c6e2ff;

    .actionButton {
      cursor: pointer;
    }
  }

  .reply-user {
    font-weight: bold;
    padding-bottom: 5px;
    display: flex;


    .user .delete {
      background: red;
      color: #fff;
      padding: 2px 5px;
      margin-right: 5px;
      border-radius: 5px;
    }

    .t {
      font-weight: normal;
      color: #999;
      margin-left: 30px;
    }
  }
}

.titleH {
  .title {
    color: #20a0ff;
    font-size: 22px;
    font-weight: bold;

    &:hover {
      color: #369;
    }
  }
}
</style>
<script>
import Pagination from '@/components/Pagination'
import Listaction from '@/components/wz/listaction'
import {getMyWzlist, getWzParams} from '@/api/wz'
import {mapGetters} from 'vuex'

let id = 0
export default {
  components: {
    Pagination,
    Listaction
  },
  data() {
    return {
      bind_cid_loading:false,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [end, start]);
          }
        }, {
          text: '本月',
          onClick(picker) {
            const now = new Date();
            const start = new Date(now.getFullYear(), now.getMonth(), 1)
            const end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
            start.setTime(start.getTime());
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      city: [],
      actionform: [],
      activeNames: ['1', '2'],
      actionloading: false,
      actionData: [],
      action: false,
      total: 0,
      list: [],
      drawer: true,
      checkLeaderData: [],
      checkLeader: [],
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        checktime: '',
        status: '',
        quhua_id: 0
      },
      baseData: [],
      dialogVisible: false,
      dialogType: 'create',
      loading: false,
      temp: {
        user_cid: ''
      },
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'bind_city',
      'bind_cid'
    ])
  },
  created() {
    //默认本月
    if (this.bind_cid > 0) {
      const now = new Date();
      const start = new Date(now.getFullYear(), now.getMonth(), 1)
      const end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
      const defaultTime = [start, end]
      this.$set(this.listQuery, 'checktime', defaultTime)
      this.WzParams()
      this.fetchData()
    } else {
      this.getCity()
    }

  },
  methods: {
    doAction(wid){
      this.$refs.actionref.openAction(wid)
    },
    do_bind_cid(){
      if(!this.temp.user_cid){
        this.$message({
          message: '请选择绑定区域',
          type: 'error'
        })
        return  false
      }
      this.bind_cid_loading = true
      bindCity(this.temp).then(response => {
        location.reload()
      },data=>{
        this.bind_cid_loading = false
      })
    },
    getCity() {
      this.$router.push(`/wz/wz/bind`)
    },
    chaoqiTime(rt, et) {
      return '约' + Math.ceil((rt - et) / 60 / 60 / 24) + '天';
    },
    search() {
      this.fetchData()
    },
    goWid(wid) {
      // this.$router.push({path: '/wz/action', query: {wid: wid}})
    },
    refresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        quhua_id: 0
      }
      localStorage.setItem('wzbaseData', '')
      this.fetchData()
      this.WzParams()
    },
    WzParams() {
      let baseData = localStorage.getItem('wzbaseData')
      if (!baseData) {
        getWzParams().then(response => {
          this.baseData = response.data
          localStorage.setItem('wzbaseData', JSON.stringify(this.baseData))
        })
      } else {
        this.baseData = JSON.parse(baseData)
      }
    },
    sortChange(column) {
      this.fetchData(column)
    },
    fetchData(column) {
      this.listLoading = true
      if (column) {
        this.listQuery.orderFiled = column.prop
        this.listQuery.orderType = column.order
      }
      getMyWzlist(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
        if (this.listQuery.u_uid) {
          this.listQuery.u_name = response.data.data[0].u_name
        }
      })
    },
    submit() {

    }
  }
}
</script>
